<template>
    <view class="example">
		<view class="item" v-for="item in urls" :key="item.name" hover-class="hover-class">
            <navigator :url="item.url">{{item.name}}</navigator>
		</view>
	</view>
</template>


<script setup>
import {ref} from "vue";

const urls = ref([
	{name: "0-1.初步学习案例一", url: "/pages/demo/demo"},
	{name: "0-2.数据绑定", url: "/pages/index/demodemo"},
	{name: "1.图片滚动和图片案例", url: "/pages/demo1/demo1"},
	{name: "2.数据绑定2", url: "/pages/demo2/demo2"},
	{name: "3.数据绑定3", url: "/pages/demo3/demo3"},
	{name: "4.小案例01(点击事件)", url: "/pages/demo4/demo4"},
	{name: "5.v-if/v-show的案例", url: "/pages/demo5/demo5"},
	{name: "6.v-for的案例", url: "/pages/demo6/demo6"},
	{name: "7.多选按钮案例", url: "/pages/demo7/demo7"},
	{name: "7-1.数组移除", url: "/pages/demo7/demo7-00"},
	{name: "8.输入框", url: "/pages/demo8/demo8"},
	{name: "9.数组添加(icon操作)", url: "/pages/demo9/demo9"},
	{name: "10.computed", url: "/pages/demo10/demo10"},
	{name: "11.watchEffect", url: "/pages/demo11/demo11"},
])

</script>


<style lang="scss">
 .hover-class{
    border: 1px solid rgb(11, 176, 231);
	background: rgb(11, 176, 231);
	color: #fff;
 }

 .example{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: rgb(11, 176, 231);

	.item{
		margin: 5px 0;
		padding: 5px 15px; 
		border: 1px solid lightgray;
		border-radius: 10px; 
	}

 }
</style>
